<template>
  <div id="page-layout">
    <a-row class="home-main-layout" type="flex" justify="space-around">
      <a-col
        class="info-card"
        style="background: #33cabb"
        :xs="22"
        :sm="10"
        :md="10"
        :lg="5"
        :xl="5"
      >
        <div class="info-card-icon">
          <a-icon style="font-size: 48px" type="team" />
        </div>
        <div class="info-card-text">
          <p style="font-size: 12px; margin-bottom: 5px">学生总数</p>
          <p style="font-size: 24px">{{ homeInfo.student }}</p>
        </div>
      </a-col>
      <a-col
        class="info-card"
        style="background: #f96868"
        :xs="22"
        :sm="10"
        :md="10"
        :lg="5"
        :xl="5"
      >
        <div class="info-card-icon">
          <a-icon style="font-size: 48px" type="book" />
        </div>
        <div class="info-card-text">
          <p style="font-size: 12px; margin-bottom: 5px">专业总数</p>
          <p style="font-size: 24px">{{ homeInfo.major }}</p>
        </div>
      </a-col>
      <a-col
        class="info-card"
        style="background: #15c377"
        :xs="22"
        :sm="10"
        :md="10"
        :lg="5"
        :xl="5"
      >
        <div class="info-card-icon">
          <a-icon style="font-size: 48px" type="file-text" />
        </div>
        <div class="info-card-text">
          <p style="font-size: 12px; margin-bottom: 5px">课程总数</p>
          <p style="font-size: 24px">{{ homeInfo.course }}</p>
        </div>
      </a-col>
      <a-col
        class="info-card"
        style="background: #926dde"
        :xs="22"
        :sm="10"
        :md="10"
        :lg="5"
        :xl="5"
      >
        <div class="info-card-icon">
          <a-icon style="font-size: 48px" type="link" />
        </div>
        <div class="info-card-text">
          <p style="font-size: 12px; margin-bottom: 5px">上链人数</p>
          <p style="font-size: 24px">{{ homeInfo.uplinked }}</p>
        </div>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="23"
        :xl="23"
      >
        <a-card title="主页">
          <p>欢迎您使用终生教学服务平台联盟端</p>
          <p>
            您的身份为:
            <template v-if="userInfo.role == 'admin'"> 管理员 </template>
            <template v-else-if="userInfo.role == 'director'">
              教导主任
            </template>
            <template v-else> 教师 </template>
          </p>
          <p v-if="userInfo.role == 'admin'">您可以对联盟内成员进行管理</p>
          <p v-else-if="userInfo.role == 'director'">
            您可以对联盟内专业, 课程和学生进行进行管理. 并完成学生成绩的上链
          </p>
          <p v-else>您可以对联盟内学生成绩进行管理. 并对学生经历进行认证</p>
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="11"
        :xl="11"
      >
        <a-card title="联盟入学人数">
          <Chart
            :xAxis="homeInfo.annualEnrollment.subscript"
            :series="[
              {
                name: '入学人数',
                type: 'bar',
                data: homeInfo.annualEnrollment.data,
              },
            ]"
            :legend="[{ name: '入学人数' }]"
            :color="['#ff7f50']"
          />
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="11"
        :xl="11"
      >
        <a-card title="联盟学生上链人数">
          <Chart
            :xAxis="homeInfo.annualGraduation.subscript"
            :series="[
              {
                name: '上链人数',
                type: 'bar',
                data: homeInfo.annualGraduation.data,
              },
            ]"
            :legend="[{ name: '上链人数' }]"
            :color="['#87cefa']"
          />
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="11"
        :xl="11"
      >
        <a-card title="联盟专业数量">
          <Chart
            :xAxis="homeInfo.annualMajor.subscript"
            :series="[
              {
                name: '专业数量',
                type: 'line',
                data: homeInfo.annualMajor.data,
              },
            ]"
            :legend="[{ name: '专业数量' }]"
            :color="['#da70d6']"
          />
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="11"
        :xl="11"
      >
        <a-card title="联盟课程数量">
          <Chart
            :xAxis="homeInfo.annualCourse.subscript"
            :series="[
              {
                name: '课程数量',
                type: 'line',
                data: homeInfo.annualCourse.data,
              },
            ]"
            :legend="[{ name: '课程数量' }]"
            :color="['#32cd32']"
          />
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="23"
        :xl="23"
      >
        <a-card title="联盟专业人数">
          <Chart
            :yAxis="homeInfo.majorNum.subscript"
            :series="[
              {
                name: '专业人数',
                type: 'bar',
                data: homeInfo.majorNum.data,
              },
            ]"
            :legend="[{ name: '专业人数' }]"
            :inverseY="true"
            :color="['#6495ed']"
          />
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="23"
        :xl="23"
      >
        <a-card title="联盟专业成绩信息">
          <Chart
            :yAxis="homeInfo.majorAverage.subscript"
            :series="[
              {
                name: '专业平均分',
                type: 'bar',
                data: homeInfo.majorAverage.data,
              },
            ]"
            :legend="[{ name: '专业平均分' }]"
            :inverseY="true"
            :color="['#ff69b4']"
          />
        </a-card>
      </a-col>
      <a-col
        class="home-info-layout"
        :xs="22"
        :sm="22"
        :md="22"
        :lg="23"
        :xl="23"
      >
        <a-card title="联盟学生总体成绩信息">
          <Chart
            :series="[
              {
                name: '学生成绩',
                type: 'pie', // 设置图表类型为饼图
                radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data: [
                  { value: homeInfo.education[0], name: '优秀' },
                  { value: homeInfo.education[1], name: '良好' },
                  { value: homeInfo.education[2], name: '及格' },
                  { value: homeInfo.education[3], name: '不及格' },
                ],
              },
            ]"
            :color="['#87cefa', '#00fa9a', '#ffd700', '#ff6347']"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Chart from "../../components/Chart";
import { mapState, mapActions } from "vuex";
export default {
  name: "AllianceHome",
  components: {
    Chart,
  },
  mounted() {
    this.getHomeInfo();
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["userInfo", "homeInfo"]),
  },
  methods: {
    ...mapActions("user", {
      getHomeInfo: "getHomeInfo",
    }),
    getHomeData() {
      let result = this.getHomeInfo();
      // result.then((value) => {
      //   console.log(value);
      //   this.student = value.student;
      //   this.major = value.major;
      //   this.course = value.course;
      //   this.uplinked = value.uplinked;
      //   this.annualEnrollment = value.annualEnrollment || {
      //     subscript: [0],
      //     data: [0],
      //   };
      //   this.annualGraduation = value.annualGraduation || {
      //     subscript: [0],
      //     data: [0],
      //   };
      //   this.annualMajor = value.annualMajor || {
      //     subscript: [0],
      //     data: [0],
      //   };
      //   this.annualCourse = value.annualCourse || {
      //     subscript: [0],
      //     data: [0],
      //   };
      //   this.majorAverage = value.majorAverage || {
      //     subscript: [0],
      //     data: [0],
      //   };
      //   this.majorNum = value.majorNum || {
      //     subscript: [0],
      //     data: [0],
      //   };
      //   this.education = value.education || [5, 5, 5, 5];
      //   console.log(this.education[0]);
      // });
    },
  },
};
</script>

<style scoped>
#page-layout {
  overflow-x: auto;
  overflow-y: auto;
  height: 700px;
  padding: 30px;
  background: #f5f6fa;
}
.home-main-layout {
  margin-bottom: 24px;
}
.home-info-layout {
  margin-bottom: 24px;
  background: #fff;
  text-align: left;
}
.info-card {
  height: 106px;
  padding: 24px 24px;
  margin-bottom: 24px;
  color: #fff;
  overflow: hidden;
}
.info-card-icon {
  float: left;
  margin-left: 5px;
}
.info-card-text {
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}
</style>